/* eslint-disable array-callback-return,no-undef */
import fetch from 'dva/fetch';
import React, { Component } from 'react';
import { Layout, Tabs, Form, Spin, Modal, message, Row, Col, Avatar } from 'antd';
import styles from '../../../index.less';
import Toolbar from '../../Common/ToolBar/ToolBar';
import TabMainTable from './TabMainTable';
import TabCounter from './TabCounter';
import TabParameter from './TabParameter';
import TabSystem from './TabSystem';
import TabBusiness from './TabBusiness';
import * as config from '../../../utils/config';
import * as commonFunc from '../../Common/commonFunc';
import baseHigher from '../../Common/baseHigher';
import imgInvalid from '../../../assets/haveCancel.png';

const { confirm } = Modal;
const { Header, Content } = Layout;
const { TabPane } = Tabs;

class SisFormula extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabCounter: '', /* 计算器区域 */
      tabParameter: '', /* 计算参数 */
      tabSystem: '', /* 系统函数 */
      tabBusiness: '', /* 业务函数 */
      disabled: false, /* 是否是查看状态 */
      formulaData: {}, /* 计算方案数据 */
      changeDataFlag: false, /* 子组件更改值父组件是否刷新标识 */
      loading: false,
      jsqData: config.jsqData, /* 计算器按钮 */
      btnData: config.btnData, /* 工具栏按钮 */
      masterConfig: { sId: '' }, // 主表 + 从表 配置
      sId: '', /* 业务数据ID */
      sActiveId: '', /* 窗体Id */
      masterShowConfig: '', /* 显示的配置 */
      paramData: [], /* 计算参数 */
      gdsformconst: [], /* 常量 */
      sListFormmasterId: '',
      sFormmasterId: '',
      configureMap: '',
      sFilterOrderBy: '',
      bFilter: '',
      currentData: [],
      pages: {},
      pageSize: '',
      currentIndex: '',
      currentIndexFlag: false,
      report: [], /* 打印报表 */
    };
  }

  componentWillReceiveProps(nextProps) {
    const { dataList } = nextProps.content;
    const { gdsformconst, report } = nextProps;
    if (this.state.gdsformconst.length === 0) {
      this.setState({
        gdsformconst,
      });
    }
    if (this.state.report.length === 0) {
      const btnDataChild = [];
      report.forEach((child, i) => {
        btnDataChild.push({
          sName: `BtnPrint.${i}`,
          showName: child.sReportName,
          bVisible: true,
          sActiveId: '',
          sId: child.sId,
        });
      });
      this.setState({ btnDataChild, report });
    }
    /* 配置 */
    const {
      sDataListTabId, urlData, formRoute, loading, sId,
    } = dataList;
    /* 数据Id */
    const { formId } = nextProps;
    /* 窗体全部配置 */
    const masterConfig = commonFunc.getWindowConfig('sisformula', nextProps.formData);
    if (nextProps.sTabId === sDataListTabId && nextProps.formRoute === formRoute && nextProps.formData.length > 0) {
      if (loading) {
        this.setState({ loading: true });
        return;
      }
      if (dataList.returnType !== undefined && dataList.returnType === 'CUD') {
        if (sId !== undefined && sId !== '') {
          this.setState({ sId });
        }
        this.setState({ disabled: dataList.disabled });
        this.handleRefresh(sId);
        return;
      }
      /* 窗体显示配置 */
      const masterShowConfig = commonFunc.getConfigCondition(masterConfig.gdsconfigformslave, 'bVisible');
      if (this.state.sActiveId === '') {
        const materielPan = nextProps.app.currentPane;
        /* 获取工具栏, 主表，页签标题 */
        this.setState({ toolProps: nextProps });
        const { formData } = urlData;
        /* 窗体配置 */
        const mainTable = formData.filter(item => (item.sTbName.toLowerCase() === 'sisformula'))[0];
        /* 匹配主表 */
        const mainConfig = mainTable.gdsconfigformslave;
        const tabCounter = mainConfig.filter(item => (item.sControlName.toLowerCase() === 'tabcounter'))[0];
        const tabParameter = mainConfig.filter(item => (item.sControlName.toLowerCase() === 'tabparameter'))[0];
        const tabSystem = mainConfig.filter(item => (item.sControlName.toLowerCase() === 'tabsystem'))[0];
        const tabBusiness = mainConfig.filter(item => (item.sControlName.toLowerCase() === 'tabbusiness'))[0];
        /* 从表配置 */
        this.setState({
          formData,
          mainTable,
          disabled: materielPan.disabled !== undefined ? materielPan.disabled : false,
          sId: materielPan.checkedId !== undefined ? materielPan.checkedId : '',
          sActiveId: formId,
          tabCounter: tabCounter !== undefined ? tabCounter : { showName: '计算器区域', sId: new Date().getTime() + 1 }, /* 页签名 */
          tabParameter: tabParameter !== undefined ? tabParameter : { showName: '计算参数', sId: new Date().getTime() + 2 },
          tabSystem: tabSystem !== undefined ? tabSystem : { showName: '系统函数', sId: new Date().getTime() + 3 },
          tabBusiness: tabBusiness !== undefined ? tabBusiness : { showName: '业务函数', sId: new Date().getTime() + 4 },
          sFilterOrderBy: materielPan.sFilterOrderBy,
          bFilter: materielPan.bFilter,
          currentData: materielPan.currentData,
          sListFormmasterId: materielPan.sListFormmasterId,
          pageSize: materielPan.pageSize,
          pages: materielPan.pages,
          currentIndex: materielPan.newKey !== undefined ? materielPan.newKey.split('-')[materielPan.newKey.split('-').length - 1] : '',
        });
        this.setState({ masterConfig, masterShowConfig, dataList });
      } else if (dataList.returnType !== undefined && dataList.returnType === 'data'
        && dataList.componentName.indexOf('sisformulaparam') <= -1
      ) {
        const formulaData = Object.keys(urlData).length > 0
          ? urlData[0] : [];
        this.setState({ formulaData, loading: false });
      }
      if (dataList.returnType !== undefined
        && dataList.returnType === 'data'
        && dataList.componentName === 'sisformulaparam' && this.state.paramData.length === 0) {
        const paramData = Object.keys(urlData).length > 0
          ? urlData : [];
        this.setState({ paramData, loading: false });
      }
    }
  }

  /* 刷新 */
  handleRefresh = (newsId) => {
    const { dispatch } = this.props;
    const { masterConfig, sId, sActiveId } = this.state;
    let id = sId;
    if (newsId !== undefined && newsId !== '') {
      id = newsId;
    }
    if (id !== undefined && id !== '') {
      /* 表Id */
      const mainId = masterConfig.sId;
      /* 业务数据Id */
      const value = { sId: id };
      const sTabId = this.props.app.currentPane.key;
      const mainDataUrl =
        `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: mainDataUrl,
          sTabId,
          componentName: 'sisformula',
          value,
          formRoute: '/sisformula',
          returnType: 'data',
        },
      });
    } else {
      /* 应清空所有组件,或刷新不做任何处理或屏蔽刷新按钮 */
    }
  };

  handlePrintChild = (sId) => {
    const { formData } = this.state;
    const { token } = this.props.app;
    const { sActiveId } = this.state;
    const sMainTableId = formData[0].sId;
    const queryFilter = {};
    formData.map((item) => {
      const sDataId = item.sId;
      queryFilter[sDataId] = sDataId === sMainTableId ? { sId: this.state.sId } : {
        sSqlCondition: {
          sParentId: this.state.sId,
        },
      };
    });
    const sReportId = sId;
    const queryFilterJson = escape(JSON.stringify(queryFilter));
    const urlPrint = `${config.server_host}printReport/printPdf/${sReportId}?queryFilter=${queryFilterJson}&sModelsId=${sActiveId}&sMaintableId=${sMainTableId}&token=${encodeURIComponent(token)}`;
    window.open(urlPrint);
  };

  /* 获取上一条下一条首条末条 */
  handleSearchData = (sValue) => {
    const { sActiveId } = this.state;
    const { token } = this.props.app;
    const {
      sListFormmasterId, sFilterOrderBy, bFilter, formData, pages, pageSize, currentIndex, currentIndexFlag,
    } = this.state;
    let currentIndexPop = currentIndexFlag ? currentIndex : ((pages.pageNum - 1) * pageSize) + Number.parseInt(currentIndex, 10);
    if (sValue === 'first') {
      currentIndexPop = 1;
    } else if (sValue === 'end') {
      currentIndexPop = pages.totalCount;
    }
    const url = `${config.server_host}business/getBusinessDataByIndex?sModelsId=${sActiveId}`;
    const arrayForm = {};
    formData.forEach((child) => {
      const keys = child.sId;
      if (child.sTbName !== 'sisformulaparam') {
        arrayForm[`${keys}`] = keys;
      }
    });
    const value = {
      sClientType: '1',
      sListFormmasterId,
      sFormmasterId: formData[0].sId,
      currentPosition: currentIndexPop,
      configureMap: arrayForm,
      sHandleType: sValue,
      iCountSum: pages.totalCount,
    };
    if (bFilter !== undefined && bFilter !== '' && Object.keys(bFilter).length > 0) {
      value.push({ bFilter });
    }
    if (sFilterOrderBy !== undefined && sFilterOrderBy !== '' && Object.keys(sFilterOrderBy).length > 0) {
      value.push({ sFilterOrderBy });
    }
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify(value),
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        const values = json.dataset.rows[0];
        const currentPostion = values.currentPosition;
        formData.forEach((child) => {
          const sMainId = child.sId;
          const sMainTableName = child.sTbName;
          if (sMainTableName === 'sisformula') {
            this.setState({
              formulaData: values[sMainId][0],
              sId: values[sMainId][0].sId,
            });
          }
        });
        this.setState({
          currentIndex: currentPostion,
          currentIndexFlag: true,
        });
      } else {
        message.error(json.msg);
      }
    });
  };
  /* 审核 */
  handleExamine = () => {
    const { sActiveId } = this.state;
    const { subjectData } = this.state;
    const { token } = this.props.app;
    const url = `${config.server_host}business/doExamine?sModelsId=${sActiveId}`;
    const paramsMap = {
      iFlag: 1,
      iTmpCheck: 0,
      sFormGuid: sActiveId,
      sGuid: this.state.sId,
    };
    const value = {
      sClientType: '1',
      sProName: 'Sp_Calc_sSod',
      paramsMap,
    };
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify(value),
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        const { outData } = json.dataset.rows[0].dataSet;
        if (outData[0] === undefined || outData[0] === null || outData[0] === '' || outData[0].sReturn.split('-').length < 2) {
          message.success(json.msg);
        } else {
          const sReturnMessage = [];
          const sReturnArray = outData[0].sReturn.split('|');
          let sCheckModelId = '';
          if ((sReturnArray.length > 1) && ((sReturnArray[0].split('-')).length > 2)) {
            [sCheckModelId] = sReturnArray;
            [, sCheckModelId] = sCheckModelId.split('-');
          }
          sReturnArray.forEach((child) => {
            const smg = child.split('-');
            const sId = smg[0];
            const sData = subjectData.filter(item => (item.sId === sId));
            if (sData.length > 0) {
              const sNames = sData[0].sProductId.split('[-]');
              const sName = sNames.length > 2 ? sNames[1] : '';
              const messageCheck = `${sName}-${smg[2]}`;
              sReturnMessage.push(messageCheck);
              this.setState({
                sReturnMessage,
                sCheckModelId,
              });
            }
          });
          this.handleShowModal();
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  /* 审核模板不通过时的弹窗 */
  handleShowModal = () => {
    this.setState({
      visible: true,
    });
  };
  /* 消审 */
  handleCancelExamine = () => {
    const { sActiveId } = this.state;
    const { token } = this.props.app;
    const url = `${config.server_host}business/doExamine?sModelsId=${sActiveId}`;
    const paramsMap = {
      iFlag: 0,
      iTmpCheck: 0,
      sFormGuid: sActiveId,
      sGuid: this.state.sId,
    };
    const value = {
      sClientType: '1',
      sProName: 'Sp_Calc_sSod',
      paramsMap,
    };
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify(value),
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        message.success(json.msg);
      } else {
        message.error(json.msg);
      }
    });
  };
  /* 新增 */
  handleAdd = () => {
    /* Tab标签Id */
    this.setState({
      formulaData: { bInvalid: false },
      disabled: false,
      sId: '',
    });
  };
  /* 修改 */
  handleEdit = (obj) => {
    const { disabled } = obj;
    const { formulaData, gdsformconst } = this.state;
    const sToVoidEdit = gdsformconst.filter(item => (item.sName === 'sToVoidEdit'));
    if (formulaData.bInvalid === true) {
      message.warning(sToVoidEdit[0].showName);
      return;
    }
    this.setState({ disabled });
  };

  /* 删除 */
  handleDel = () => {
    const onhandleOk = this.handleOk;
    const { sId } = this.state;
    const { token } = this.props.app;
    const { sActiveId } = this.state;
    confirm({
      title: '确定要删除?',
      onOk() {
        const value = {
          data: {
            sMasterTable: 'sisformula',
            sId: [sId],
          },
          sClientType: '1',
        };
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
          body: JSON.stringify(value),
        };
        const url = `${config.server_host}business/delMasSlaBusinessData?sModelsId=${sActiveId}`;
        fetch(url, options).then(response => response.json()).then((json) => {
          if (json.code === 1) {
            message.success(json.msg);
            onhandleOk();
          } else {
            message.error(json.msg);
          }
        });
      },
      onCancel() {},
    });
  };

  handleInvalidOk = () => {
    const { formulaData } = this.state;
    formulaData.bInvalid = true;
    this.setState({
      formulaData,
    });
  };

  /* 作废 */
  handleInvalid = () => {
    const onInvalidOk = this.handleInvalidOk;
    const { sId } = this.state;
    const { token } = this.props.app;
    const { sActiveId } = this.state;
    confirm({
      title: '确定要作废?',
      onOk() {
        const value = {
          sTableName: 'sisformula',
          sId: [sId],
          sHandleType: 'toVoid',
          sClientType: '1',
        };
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
          body: JSON.stringify(value),
        };
        const url = `${config.server_host}checkModel/updatebInvalid?sModelsId=${sActiveId}`;
        fetch(url, options).then(response => response.json()).then((json) => {
          if (json.code === 1) {
            message.success(json.msg);
            onInvalidOk();
          } else {
            message.error(json.msg);
          }
        });
      },
      onCancel() {},
    });
  };

  handleInvalidCancel = () => {
    const { formulaData } = this.state;
    formulaData.bInvalid = false;
    this.setState({
      formulaData,
    });
  };

  /* 取消作废 */
  handleCancelInvalid = () => {
    const onInvalidCancel = this.handleInvalidCancel;
    const { sId } = this.state;
    const { token } = this.props.app;
    const { sActiveId } = this.state;
    confirm({
      title: '确定要取消作废?',
      onOk() {
        const value = {
          sTableName: 'sisformula',
          sId: [sId],
          sHandleType: 'cancel',
          sClientType: '1',
        };
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            authorization: token,
          },
          body: JSON.stringify(value),
        };
        const url = `${config.server_host}checkModel/updatebInvalid?sModelsId=${sActiveId}`;
        fetch(url, options).then(response => response.json()).then((json) => {
          if (json.code === 1) {
            message.success(json.msg);
            onInvalidCancel();
          } else {
            message.error(json.msg);
          }
        });
      },
      onCancel() {},
    });
  };
  /* 取消 */
  handleCancel =(type) => {
    const onhandleOk = this.handleOk;
    confirm({
      title: '确定要取消?',
      onOk() {
        onhandleOk(type);
      },
      onCancel() {},
    });
  };

  /* 数据自动变更 */
  handleFormChange = (value) => {
    const key = Object.keys(value)[0];
    const { formulaData, masterShowConfig } = this.state;
    const showConfig = masterShowConfig.filter(item => (item.sName === key))[0];
    if (showConfig !== undefined && showConfig.sDropDownType === 'sql') return;
    /* 数据处理,手动清空数据时数据会为undefined，不符合数据赋值要求 */
    const changeValue = commonFunc.changeValue(value);
    this.setState({
      formulaData: { ...formulaData, ...changeValue },
    });
  };

  /* 确认取消 */
  handleOk = () => {
    let lastIndex = -1;
    this.props.app.panes.forEach((pane, i) => {
      if (pane.key === this.props.app.currentPane.key) {
        lastIndex = i - 1;
      }
    });

    const panes = this.props.app.panes.filter(pane => pane.key !== this.props.app.currentPane.key);
    let currentPane;
    if (lastIndex >= 0) {
      currentPane = panes[lastIndex];
    } else if (lastIndex === -1 && panes.length > 0) {
      currentPane = panes[lastIndex + 1];
    } else {
      currentPane = { title: '', route: '', key: '0' };
    }
    this.props.onRemovePane(panes, currentPane);
  };

  /* 保存 */
  handleSubmit() {
    const { dispatch } = this.props;
    /* 业务数据Id */
    const sTabId = this.props.app.currentPane.key;
    this.form.validateFieldsAndScroll((err, formValue) => {
      if (!err) {
        // this.handleField();
        const stateFormValue = this.state.formulaData;
        const inputValue = { ...formValue, ...stateFormValue };
        const { sActiveId } = this.state;
        const dataUrl = `${config.server_host}business/addUpdateDelBusinessData?sModelsId=${sActiveId}`;
        if (this.state.sId !== '') {
          inputValue.handleType = 'update';
          const value = {
            data: [{
              sTable: 'sisformula',
              column: [inputValue],
            }],
            sClientType: '1',
          };
          dispatch({
            type: 'content/getUrlPostData',
            payload: {
              url: dataUrl,
              sTabId,
              value,
              componentName: 'sisformula',
              formRoute: '/sisformula',
              returnType: 'CUD',
            },
          });
        } else {
          inputValue.handleType = 'add';
          const options = {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          };
          const url = `${config.server_host}getUuid`;
          fetch(url, options).then(response => response.json()).then((json) => {
            if (json.code === 1) {
              const sId = json.dataset.rows[0];
              inputValue.sId = sId;
              /* 把新增时获取的唯一主键放在STATE中用于成功后刷新动作 */
              const value = {
                data: [{
                  sTable: 'sisformula',
                  column: [inputValue],
                }],
                sClientType: '1',
              };
              dispatch({
                type: 'content/getUrlPostData',
                payload: {
                  url: dataUrl,
                  sTabId,
                  value,
                  componentName: 'sisformula',
                  formRoute: '/sisformula',
                  returnType: 'CUD',
                  sId,
                },
              });
            }
          });
        }
      }
    });
  }

  handleForm = (form) => {
    this.form = form;
  };

  handleChangeFormnula = (value) => {
    /* 改变公示显示值 */
    const { formulaData } = this.state;
    const sFormula = (Object.keys(formulaData).length > 0 && formulaData.sFormula !== undefined) ? formulaData.sFormula : '';
    const changeFormula = `${sFormula}${value}`;
    this.setState({
      formulaData: {
        ...formulaData,
        sFormula: changeFormula,
      },
    });
  };

  /* 校验公式 */
  handleField = () => {
    const { sActiveId } = this.state;
    const { token } = this.props.app;
    const { formulaData } = this.state;
    const value = {
      handleType: 'check',
      sFormulaText: formulaData.sFormula,
      sClientType: '1',
    };
    const url = `${config.server_host}replaceField/checkReplaceField?sModelsId=${sActiveId}`;
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify(value),
    };
    fetch(url, options).then(response => response.json()).then((json) => {
      if (json.code === 1) {
        message.success(json.msg);
      } else {
        message.error(json.msg);
      }
    });
  };


  render() {
    const { pageLoading } = this.props;
    const { props, state } = this;
    const { loading } = this.state;
    return (
      <div>
        <Spin spinning={loading}>
          {pageLoading ? '' :
          <SisformulaComponent
            {...props}
            {...state}
            handleSubmit={this.handleSubmit.bind(this)}
            handleEdit={this.handleEdit.bind(this)}
            handleAdd={this.handleAdd.bind(this)}
            handleOk={this.handleOk.bind(this)}
            handleCancel={this.handleCancel.bind(this)}
            handleRefresh={this.handleRefresh.bind(this)}
            handleDel={this.handleDel.bind(this)}
            onChange={this.handleFormChange.bind(this)}
            handleForm={this.handleForm.bind(this)}
            onChangeFormnula={this.handleChangeFormnula.bind(this)}
            onField={this.handleField.bind(this)}
            onInvalid={this.handleInvalid.bind(this)}
            onCancelInvalid={this.handleCancelInvalid.bind(this)}
            onNext={this.handleSearchData.bind(this, 'next')}
            onPrior={this.handleSearchData.bind(this, 'up')}
            onFirst={this.handleSearchData.bind(this, 'first')}
            onLast={this.handleSearchData.bind(this, 'end')}
            onPrintChild={this.handlePrintChild}
          />}
        </Spin>
      </div>
    );
  }
}

const SisformulaComponent = Form.create({
  mapPropsToFields(props) {
    const { formulaData, masterShowConfig } = props;
    const obj = commonFunc.mapPropsToFieldsChangeValue(masterShowConfig, formulaData, Form);
    return obj;
  },
  onValuesChange(props, changedFields) {
    props.onChange(changedFields);
  },
})((props) => {
  const { app, form } = props;
  const {
    sActiveId,
    masterConfig,
    sId,
    formData,
    dispatch,
    disabled,
    handleRefresh,
    handleEdit,
    handleCancel,
    handleSubmit,
    handleAdd,
    handleDel,
    changeDataFlag,
    content,
    formulaData,
    paramData,
    onChangeFormnula,
    onInvalid,
    onCancelInvalid,
    onField,
    onNext,
    onPrior,
    onFirst,
    onLast,
    btnDataChild,
    onPrintChild,
  } = props;
  /* 主表 */
  const { handleForm } = props;
  const childProps = {
    app, form, sActiveId, sId, disabled, dispatch, content, masterConfig, onChangeFormnula,
  };
  const mainProps = {
    formData,
    componentName: 'sisformula',
    ...childProps,
    changeDataFlag,
    dataName: 'formulaData',
    dataType: 'Map',
    dataSet: formulaData,
  };
  /* 页签 */
  const {
    tabCounter, tabParameter, tabSystem, tabBusiness,
  } = props;
  const paramConfig = formData.filter(item => (item.sTbName.toLowerCase() === 'sisformulaparam'))[0];
  const parameterProps = {
    formData,
    componentName: 'sisformulaparam',
    ...childProps,
    masterConfig: paramConfig !== undefined ? paramConfig : { sId: '' },
    dataExist: Object.keys(paramData).length > 0,
    dataName: 'paramData',
    dataType: 'List',
    dataList: paramData,
    onInvalid,
    onCancelInvalid,
    onField,
    onPrintChild,
  };
  const systemProps = {
    formData, componentName: 'system', ...childProps, changeDataFlag,
  };
  const businessProps = {
    formData, componentName: 'business', ...childProps, changeDataFlag,
  };
  const bShow = formulaData.bInvalid;
  let imgOption = '';
  if (bShow) {
    imgOption = <Avatar src={imgInvalid} />;
  }
  return (
    <Form>
      <Layout>
        <Header className={styles.header}>
          <Toolbar
            componentName="toolsisformula"
            {...props}
            onAdd={handleAdd}
            onEdit={handleEdit}
            onBtnDel={handleDel}
            onBtnCancel={handleCancel}
            onRefresh={handleRefresh}
            onSubmit={handleSubmit}
            onBtnInvalid={onInvalid}
            onBtnCancelInvalid={onCancelInvalid}
            onField={onField}
            onNext={onNext}
            onBtnPrior={onPrior}
            onBtnFirst={onFirst}
            onBtnLast={onLast}
            btnDataChild={btnDataChild}
            onBtnPrintChild={onPrintChild}
          >
            {handleForm(form)}
          </Toolbar>
        </Header>
        <Layout className={styles.clayout}>
          <Content className={styles.content}>
            <TabMainTable {...mainProps} />
          </Content>
        </Layout>
        <Layout className={styles.clayoutCalc}>
          <Row type="flex" justify="space-between">
            <Col span={7} className={styles.jsqSider}>
              <div id="slaveTabs" className={bShow ? styles.bShow : ''}>
                <div style={{ display: bShow ? 'block' : 'none' }}>
                  {imgOption}
                </div>
                <Tabs style={{ marginBottom: 20 }} className={styles.slaveTabs}>
                  <TabPane tab={tabCounter.showName} key={2}>
                    <TabCounter {...props} />
                  </TabPane>
                </Tabs>
              </div>
            </Col>
            <Col span={17}>
              <div id="slaveTabs">
                <Tabs className={styles.slaveTabs}>
                  <TabPane tab={tabParameter.showName} key={3}>
                    <TabParameter {...parameterProps} />
                  </TabPane>
                  <TabPane tab={tabSystem.showName} key={4}>
                    <TabSystem {...systemProps} />
                  </TabPane>
                  <TabPane tab={tabBusiness.showName} key={5}>
                    <TabBusiness {...businessProps} />
                  </TabPane>
                </Tabs>
              </div>
            </Col>
          </Row>
        </Layout>
      </Layout>
    </Form>
  );
});


export default baseHigher(SisFormula);
